<template>
	<div>

		<el-card class="thumb-wrap">
			<span slot="header">商品主图</span>
			<image-uploader 
				:imageUrl.sync="thumbUrl" 
				uploadUrl="/goods/uploadImage" 
				type="thumb" 
				width="200px" 
				height="200px">
			</image-uploader>
		</el-card>

		<el-divider></el-divider>

		<el-card class="banner-wrap">
			<span slot="header">商品轮播图<small>（每组最多可上传5张图片，最少1张）</small></span>
			<el-collapse accordion v-if="bannerGroups.length > 0" style="margin-bottom: 20px;">
				<el-collapse-item v-for="(item, index) in bannerGroups" :key="index">
					<template slot="title">
						<el-tag>{{item.name}}</el-tag>
					</template>
					<div class="banner-group" @click="groupIndex = index">
						<el-popover v-for="(url, urlIndex) in item.urls" :key="urlIndex" trigger="hover">
							<el-button size="mini" type="text" icon="el-icon-caret-left" @click="sort(index, urlIndex, url, 0)">前移</el-button>
							<el-button size="mini" type="text" icon="el-icon-caret-right" @click="sort(index, urlIndex, url, 1)">后移</el-button>
							<el-button size="mini" type="danger" icon="el-icon-delete" title="删除" @click="deleteBanner(index, urlIndex)"></el-button>

							<el-image slot="reference" :src="url" :preview-src-list="item.urls" fit="cover" class="banner"></el-image>
						</el-popover>

						<multiple-uploader
							v-if="item.urls.length < 5"
							:limit="5"
							uploadUrl="/goods/uploadImage"
							type="banner"
							width="200px"
							height="200px"
							@change="onBannerUploaded">
						</multiple-uploader>
					</div>
				</el-collapse-item>
			</el-collapse>

			<!-- 新增轮播图组 -->
			<el-button type="text" size="small" icon="el-icon-plus" @click="addBannerGroup">新增分组</el-button>
		</el-card>

	</div>
</template>

<script>
	import multipleUploader from '@/components/uploader/multiple-uploader.vue';

	export default {
		components: {
			multipleUploader
		},
		inject: ['bannerGroups'],
		props: {
			goods: {}
		},
		watch: {
			goods(e) {
				this.thumbUrl = e.thumbUrl;
				this.bannerGroups.push(...e.banners.map(e => {
					return {
						id: e.id,
						name: e.name,
						urls: e.urls.split(',')
					}
				}));
			}
		},
		data() {
			return {
				thumbUrl: '',
				groupIndex: -1
			}
		},
		methods: {
			onBannerUploaded(res) {
				if (this.bannerGroups[this.groupIndex].urls.length >= 5) return;
				this.bannerGroups[this.groupIndex].urls.push(res);
			},
			sort(index, urlIndex, url, mode) {
				if (mode == 0 && urlIndex == 0) return;
				if (mode == 1 && urlIndex == this.bannerGroups[index].urls.length - 1) return;

				const spliceIndex = mode == 0 ? urlIndex - 1 : urlIndex + 1;
				const slideUrl = this.bannerGroups[index].urls.splice(spliceIndex, 1, url)[0];
				this.bannerGroups[index].urls[urlIndex] = slideUrl;
			},
			deleteBanner(index, urlIndex) {
				this.bannerGroups[index].urls.splice(urlIndex, 1);

				if (this.bannerGroups[index].urls.length == 0) {
					this.bannerGroups.splice(index, 1);
				}
			},
			addBannerGroup() {
				this.$prompt('请输入分组名称', '新增轮播图分组', {
					inputValidator: (val) => {
						if (!val) {
							return '请输入分组名称';
						} else if (val.length > 20) {
							return '名称不能超过20个字符';
						} else if (this.bannerGroups.findIndex(e => e.name == val) != -1) {
							return '该名称已存在';
						}
					}
				}).then(res => {
					this.bannerGroups.push({
						name: res.value,
						urls: []
					});

					this.$message.success('创建成功');
				}).catch(_ => {});
			},
			returnValue() {
				if (!this.thumbUrl) return this.$util.msg('请选择商品主图');
				if (this.bannerGroups.length == 0) return this.$util.msg('请添加轮播图组');
				if (this.bannerGroups[0].urls.length == 0) return this.$util.msg('请选择至少一张轮播图');

				return {
					thumbUrl: this.thumbUrl,
					bannerGroups: this.bannerGroups
				}
			}
		}
	}
</script>

<style lang="scss">
	.banner-wrap {

		.banner {
			width: 200px;
			height: 200px;
			margin-right: 20px;
			border-radius: 5px;
			border: 1px dotted $border-color;
		}

		.banner-group {
			display: flex;
			flex-wrap: wrap;
		}
	}
</style>
